<template>
  <div class="tabs-wrap">
    <div class="tabs-nav">
      <nav>
        <a
          href="javascript::"
          v-for="(item, index) in navs"
          :key="index"
          @click="change(index)"
        >{{item}}</a>
      </nav>
    </div>
    {{activeIndex}}
    <div class="tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data () {
    return {
      navs: [],
      activeIndex: 0
    }
  },
  mounted () {
    this.navs = this.$children.map((item, index) => {
      item.index = index
      return item.title
    })
  },
  methods: {
    change (index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
